<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getDiningDetail,
  deleteImage,
  getImagesByRecordId,
  type RecordImage
} from "@/api/love/dining";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, ZoomIn } from "@element-plus/icons-vue";

interface DiningRecord {
  id: number;
  location: string;
  longitude: number;
  latitude: number;
  date: string;
  amount: number;
  people: string;
  type: string;
  images: RecordImage[];
}

const route = useRoute();
const router = useRouter();
const record = ref<Partial<DiningRecord>>({});
const loading = ref(true);
const imagesLoading = ref(false);

const recordId = route.params.id as string;

async function handleDeleteImage(image: RecordImage, imageIndex: number) {
  if (!record.value || !record.value.id) return;

  try {
    await ElMessageBox.confirm(
      "确定要删除这张美美的照片吗？此操作不可恢复！",
      "删除确认",
      {
        confirmButtonText: "确定删除",
        cancelButtonText: "我再想想",
        type: "warning"
      }
    );

    await deleteImage(image.id);

    if (record.value.images) {
      record.value.images.splice(imageIndex, 1);
    }
    ElMessage.success("照片已删除");
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败，请稍后重试");
    }
  }
}

onMounted(async () => {
  if (recordId) {
    try {
      loading.value = true;
      const data = await getDiningDetail(recordId);
      record.value = data;
      // 独立获取图片列表
      imagesLoading.value = true;
      record.value.images = await getImagesByRecordId(Number(recordId));
    } catch (error) {
      ElMessage.error("获取记录详情失败");
    } finally {
      loading.value = false;
      imagesLoading.value = false;
    }
  }
});

const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="dining-detail-page">
    <el-card shadow="never">
      <template #header>
        <el-page-header @back="goBack">
          <template #content>
            <span v-if="record" class="header-title">
              <el-tag size="large" class="header-tag">{{ record.type }}</el-tag>
              <span class="header-text">详情记录</span>
            </span>
            <span v-else class="header-title">记录详情</span>
          </template>
        </el-page-header>
      </template>

      <div v-loading="loading">
        <template v-if="record">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="地点">{{
              record.location
            }}</el-descriptions-item>
            <el-descriptions-item label="时间">{{
              record.date
            }}</el-descriptions-item>
            <el-descriptions-item label="消费金额"
              >{{ record.amount }} 元</el-descriptions-item
            >
            <el-descriptions-item label="人员">{{
              record.people
            }}</el-descriptions-item>
            <el-descriptions-item label="记录类型"
              ><el-tag size="small">{{
                record.type
              }}</el-tag></el-descriptions-item
            >
          </el-descriptions>

          <el-divider content-position="left">相关图片</el-divider>

          <div v-loading="imagesLoading">
            <div
              v-if="record.images && record.images.length"
              class="image-gallery"
            >
              <div
                v-for="(img, idx) in record.images"
                :key="img.id"
                class="image-container"
              >
                <el-image
                  :src="img.imageUrl"
                  :preview-src-list="record.images.map(i => i.imageUrl)"
                  :initial-index="idx"
                  fit="cover"
                  class="gallery-image"
                />
                <div class="image-overlay">
                  <el-icon class="action-icon" size="30"><ZoomIn /></el-icon>
                  <el-icon
                    class="action-icon delete-icon"
                    size="24"
                    @click.stop="handleDeleteImage(img, idx)"
                  >
                    <Delete />
                  </el-icon>
                </div>
              </div>
            </div>
            <el-empty v-else-if="!imagesLoading" description="暂无图片" />
          </div>
        </template>
        <el-empty v-else description="无法加载记录详情" />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.dining-detail-page {
  padding: 12px 8px 0 8px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

.header-text {
  color: #303133;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.gallery-image {
  width: 150px;
  height: 150px;
  border-radius: 8px;
}
.image-container {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.image-container:hover .image-overlay {
  opacity: 1;
}
.action-icon {
  color: white;
}
.delete-icon {
  pointer-events: auto;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
}
</style>
 